<template>
  <div>

	<myheader></myheader>

	<br /><br />

			<!--面包屑导航-->
			<Breadcrumb :datas="datas" ></Breadcrumb>

	

	<section class="featured-block text-center">
		<div class="container">


			<table>
					<tr >
						<td style="padding:5px;">
							
							用户名:

						</td>
						<td style="padding:5px;">
							
							<input type="text" v-model="username" />

						</td>
					</tr>

					<tr>
						<td style="padding:5px;">
							
							密码:

						</td>
						<td style="padding:5px;">
							
							<input type="password" v-model="password" />

						</td>
					</tr>

					<tr>
						<td style="padding:5px;">
							

						</td>
						<td style="padding:5px;">
							
							<!-- 滑块验证码 -->

							<drag-verify

								:width="width"
								:height="height"
								:text="text"
								ref="Verify"
							>
								

							</drag-verify>

						</td>
					</tr>

					<tr>
						<td style="padding:5px;">
							

						</td>
						<td style="padding:5px;">
							
							<Button @click="submit">登录</Button> &nbsp;&nbsp;

							<img style="cursor:pointer;" src="http://localhost:8000/static/sina.png" @click="sina" />

							&nbsp;&nbsp;

							<img style="cursor:pointer;" src="http://localhost:8000/static/dingding.png" @click="dingding" />

						</td>
					</tr>

			</table>
			
			

		</div>
	</section>
	

	
	
	
	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>
    
  </div>
  
</template>


 
<script>

//导包
import myheader from './myheader.vue';
import dragVerify from 'vue-drag-verify';
import {config,formatXml} from '../config.js';

export default {
  data () {
    return {
      msg: "这是一个变量",
      //声明面包屑变量
      datas:[{title:'首页',route:{name:'index'}},{title:'登录页面'}],
      username:'',
      password:'',
      code:'',
      //滑块验证码
      text:'请将滑块拖动到最右侧',
      width:300,
      height:40
    }
  },
  //注册组件标签
  components:{
  		'dragVerify':dragVerify,
  		'myheader':myheader

  },
  mounted:function(){

   
  
},
  methods:{

  	//钉钉登录
  	dingding:function(){

  			let appid = 'dingoaukgkwqknzjvamdqh';
    		let redirect_uri = 'http://localhost:8000/dingding_back/';

  			//进行跳转
  			window.location.href = 'https://oapi.dingtalk.com/connect/qrconnect?appid='+appid+'&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+redirect_uri;

  	},

  	//新浪微博登录
  	sina:function(){

  			console.log(config['baseurl']);
  			console.log(formatXml('你好'));

  			//组装url
  			let url = "https://api.weibo.com/oauth2/authorize?client_id=3440988304&redirect_uri=http://127.0.0.1:8000/md_admin/weibo";

  			//进行跳转
  			window.location.href = url;

  	},
  	//提交登录
  	submit:function(){

  		//验证是否拖动了
  		console.log(this.$refs.Verify.isPassing);


  		if(this.username == ''){

  			//alert('用户名不能为空');
  			this.$Message('用户名不能为空');
  			return false;
  		}

  		if(this.password == ''){

  			//alert('用户名不能为空');
  			this.$Message('密码不能为空');
  			return false;
  		}

  		if(this.$refs.Verify.isPassing == false){

  			this.$Message('请拖动验证码');
  			return false;

  		}

  		//发送请求
  		this.axios.get('http://localhost:8000/login/',{params:{username:this.username,password:this.password}}).then((result) =>{

  						console.log(result);
  						this.$Message(result.data.message);
  						if(result.data.code == 200 ){

  							//将用户名和id存储到localstorage
	  						localStorage.setItem('username',result.data.username);
	  						localStorage.setItem('uid',result.data.uid);
	  						localStorage.setItem('jwt',result.data.jwt);
	  						
	  						//跳转
	  						this.$router.push('/');

  						}

  		});



  	}

     
  }
}


</script>
 
<style>



</style>